<template>
<div>
<div class="citysearch">
    <input type="text" placeholder="输入城市名或拼音" v-model="searchipt">
</div>
<div class="cityls" v-if="isnif">
      <ul class="isshowcity" v-show="isnshow">
        <li>您输入的城市不存在</li>
      </ul>
      <ul class="isshowliss" v-show="!isnshow">
        <li v-for="(v,i) in ctylist" :key="i" @click="currliscty(v)">
          <p>{{v}}</p>
        </li> 
      </ul>
    </div>
</div>
</template>

<script>
export default {
  name: 'citysearch',
  props:['cities'],
  data () {
    return {
      searchipt:'',
      isnshow:false,
      isnif:false,
      ctylist:[],
    }
  },
  methods:{
    currliscty(v){
      this.$store.commit('ctyclick',v)

      try{
        localStorage.setItem('fiexcity',v)
      }catch(err){
        console.log(err)
      }

      this.$router.push({'path':'/'})
    }
  },
  watch:{
    searchipt(newdata){
      this.ctylist = [];
      for(var i in this.cities){
        for(var j=0;j<this.cities[i].length;j++){
          var obj = this.cities[i][j]
          if(obj.name.indexOf(newdata) != -1 || obj.spell.indexOf(newdata) != -1){
            this.ctylist.push(obj.name)
          }
        }
      }
      if(this.searchipt == ''){
        this.isnif = false
      }else{
        this.isnif = true       
      }

      if(this.ctylist.length == 0){
        this.isnshow = true
      }else{
        this.isnshow = false
      }
    }
    
  }
}
</script>

<style scoped>
  .isshowliss li{
    font-size: 28px;
    height: 28px;
    padding: 20px 20px;
    border-bottom: 1px solid #ececec;
  }
  .isshowliss li p{
    padding-left: 16px;
  }
  .isshowcity li{
    font-size: 28px;
    padding: 18px 26px
  }
  .cityls{
    background: #fff;
    position: fixed;
    top: 176px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
  }
  .citysearch{
    display: flex;
    justify-content: center;
    height: 88px;
    background: #00bcd4;
    }
  .citysearch > input{
      border: none;
      width: 90%;
      text-align: center;
      height: 26px;
      font-size: 26px;
      padding: 16px 10px;
      border-radius: 5px;
  }
  input::placeholder{
      color: #767676;
  }
</style>
